<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 可控变量定义方法 ==> 变量劫持方法
        // Object.defineProperty(target,propName,options)
        //      + target 目标对象
        //      + propName 字符串形式的属性名称
        //      + options 定义可控变量的相关描述
        //          - value 属性默认值
        //          - enumerable 属性是否可迭代 默认值 false
        //          - writable 属性是否可以被重新赋值 默认值false
        //          - get 为开发者提供变量取值时的 扩展逻辑定义方法 - value 是冲突的
        //          - set 为开发者提供变量赋值时的 扩展逻辑定义方法 - writable 是冲突
        //                  ==> 在可控变量定义时 使用 get 和 set 过程中必须提供一个中间变量为值的记录操作
        let user = {
            sex:"未知"
        };
        Object.defineProperty(user,"name",{
            value:"tom",
            enumerable:true,
            writable:true
        })

        for (let key in user) {
           console.log( key,":",user[key] )
        }

        let _age = 23;
        Object.defineProperty(user,"age",{
            // value:23,
            // writable:true,
            enumerable:true,
            get:function(){
                console.log("年龄是个人隐私")
                return _age
            },
            set:function(nv){
                console.log("等号右侧数据",nv)
                _age = nv;
                if(nv>100){
                    console.log("年龄的有效值在0~100之间")
                }
                let pDom = document.querySelector("#age");
                pDom.textContent = nv;
            }
        })
        // console.log( user.age )
        // user.age = 111;

        function setAge(){
            user.age = Math.random()*10
        }
    </script>
</head>
<body>
    <p id="age"></p>
    <input type="button" value="setAge" onclick="setAge()">
</body>
</html>